<template>
	<view class="flex-col homepage">
		<view class="flex-row wrapper">
			<view class="flex-col flex-row wraper-col">
				<view class="flex-row box">
					<view class="u-line-1 text">{{self.name}}</view>
					<view class="box-col">
						<view class="u-line-1 text-two">{{self.relation}}</view>
					</view>
				</view>
				<view class="u-line-1 text-three">{{self.number}}</view>
			</view>
			<view class="flex-col wraper-col-two" @click="cutPat">
				<u-icon class="icon-list" name="list"></u-icon>
				<view class="u-line-1 text-four">切换就诊人</view>
			</view>
		</view>
		<view class="flex-row wrapper-two">
			<view class="u-line-1 text-five">卡内余额</view>
			<view class="u-line-1 text-six">￥{{balance}}</view>
		</view>
		<view class="flex-row wrapper-three">
			<view class="flex-row wraper-col-three">
				<view class="u-line-1 text-seven">近一年</view>
			</view>
			<view class="flex-row wraper-col-four">
				<uni-datetime-picker type="daterange" v-model="single">
					<view class="u-line-1 text-eight" @click="cutDate">选择时间</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view @click="billDetails(record.id)" class="flex-col wrapper-four" v-for="record in record" style="margin-top: 1%;">
			<view class="flex-row wraper-row">
				<view class="u-line-1 text-nine">就诊卡充值</view>
				<view class="u-line-1 text-ten">￥{{record.money}}</view>
			</view>
			<view class="flex-row wraper-row-two">
				<view class="u-line-1 text-eleven"> {{record.creationTime}}</view>
				<view class="u-line-1 text-twelve" v-if="!!record.patientCard">余额{{record.patientCard.balance}}</view>
			</view>
		</view>
		
		<!-- 切换就诊人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(patient.id)" class="flex-row wrapper" v-for="patient in patient">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text">{{patient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				URL: 'http://localhost:9000/', //主域名
				patient:[],
				record: [],
				self: '',
				isCut:false,
				isDate:false,
				single:'',
				balance:''
			}
		},
		watch:{
			single (newLength, oldLength) {
				this.single = newLength
			    console.log(newLength[0])
			    console.log(newLength[1])
				var begin = newLength[0]//获取开始时间
				var end = newLength[1]//获取结束时间
				this.confirm(begin , end)
		
			}
		},
		methods: {
			
			//充值详情
			billDetails(id){
				console.log(id)
				uni.navigateTo({
					url:'billDetails?payId='+id+'&brId='+0
				})
			},
			
			//选择日期,根据日期范围查询就真人挂号记录
			confirm(begin , end){
				console.log(begin)
				console.log(end)
				uni.request({
					url:this.URL+"record/record/record/recordDate/"+this.self.id + "/"+ begin + "/" + end,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code == 20000){
							this.record = res.data.data.record
							console.log(this.record)
						}
					}
				})
			},
			
			//关闭日期
			close(){
				this.isDate = false
			},
			
			//切换日期
			cutDate(){
				this.isDate = !this.isDate
			},
			
			//切换就诊人
			cutPat(){
				this.isCut = !this.isCut
			},
			//切换就诊人
			cutPatient(id){
				console.log(id)
				for (var i = 0; i < this.patient.length; i++) {
					if(id == this.patient[i].id){
						this.self = this.patient[i]
					}
				}
				this.isCut = false
				console.log(this.self)
				this.cardBalance(this.self.id)
				this.skypeRecord()
			},
			
			//根据就诊人查询卡内余额
			cardBalance(id){
				uni.request({
					url: this.URL + "record/record/record/cardBalance/" + id,
					method:"GET",
					success: (res) => {
						console.log("balance" , res)
						if (res.data.code = 20000) {
							this.balance = res.data.data.balance.patientCard.balance
						}
					}
				})
			},
			
			//查询当前就诊人的充值记录
			skypeRecord() {
				console.log(this.self.id)
				uni.request({
					url: this.URL + "record/record/record/patientSkype/" + this.self.id,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code = 20000) {
							this.record = res.data.data.record
							console.log("record" , this.record)
						}
					}
				})
			}


		},
		onLoad(id) {
			console.log(id.id)
			// 获取当前用户绑定的就诊人
			uni.request({
				url: this.URL + "user/user/the-patient/patientByUserId/" + id.id,
				method: "GET",
				success: (res) => {
					console.log(res)
					if (res.data.code == 20000) {
						this.record = res.data.data.patientList
						this.patient = res.data.data.patientList
						for (var i = 0; i < this.record.length; i++) {
							if (this.record[i].relation == "本人") {
								this.self = this.record[i]
							}
						}
						console.log(this.self)
						//根据就诊人查询卡内余额
						this.cardBalance(this.self.id)
						//查询当前就诊人的充值记录
						this.skypeRecord()
					}
				}
			})
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding-top: 40rpx;

		.wrapper {
			width: 704rpx;
			justify-content: space-between;
			margin-right: auto;
			margin-bottom: 38rpx;
			margin-left: auto;
			padding: 18rpx 40rpx 24rpx 30rpx;
			background: #f5f9ff;

			.wraper-col {
				width: 216rpx;
				margin-top: 12rpx;

				.box {
					width: 210rpx;
					margin-bottom: 26rpx;

					.text {
						width: 128rpx;
						margin-right: -18rpx;
						font-size: 32rpx;
					}

					.box-col {
						width: 100rpx;
						margin-top: 2rpx;
						padding: 2rpx 0rpx 0rpx 20rpx;
						border-radius: 40rpx;
						background: #e2edfe;

						.text-two {
							width: 70rpx;
							letter-spacing: 6rpx;
							color: #676cd5;
						}
					}
				}

				.text-three {
					width: 100%;
					height: 40rpx;
					font-size: 24rpx;
					color: #aaaaaa;
				}
			}

			.wraper-col-two {
				width: 146rpx;
				padding: 30rpx 0rpx 10rpx 16rpx;

				.icon-list {
					width: 28rpx;
					margin: 0rpx 0rpx 28rpx 38rpx;
				}

				.text-four {
					width: 126rpx;
					font-size: 2rpx;
				}
			}
		}

		.wrapper-two {
			width: 702rpx;
			justify-content: space-between;
			margin-right: auto;
			margin-bottom: 36rpx;
			margin-left: auto;
			padding: 40rpx 0rpx 40rpx 30rpx;
			background: #ffffff;

			.text-five {
				width: 162rpx;
				font-size: 32rpx;
			}

			.text-six {
				width: 168rpx;
				font-size: 32rpx;
			}
		}

		.wrapper-three {
			width: 340rpx;
			justify-content: space-between;
			margin: 0rpx 0rpx 32rpx 32rpx;

			.wraper-col-three {
				width: 146rpx;
				justify-content: center;
				padding: 8rpx 0rpx;
				border-radius: 40rpx;
				background: #006eff;

				.text-seven {
					width: 100rpx;
					color: #fdfeff;
				}
			}

			.wraper-col-four {
				width: 162rpx;
				height: 54rpx;
				justify-content: center;
				padding-top: 4rpx;
				border-radius: 40rpx;
				background: #e4f0ff;

				.text-eight {
					width: 118rpx;
					color: #676cd5;
				}
			}
		}

		.wrapper-four {
			width: 100%;
			padding: 30rpx 0rpx 26rpx 30rpx;
			border-top-width: 2rpx;
			border-top-style: solid;
			border-top-color: #f2f2f2;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
			border-bottom-color: #f2f2f2;
			background: #fdfeff;

			.wraper-row {
				width: 696rpx;
				justify-content: space-between;
				margin-bottom: 18rpx;

				.text-nine {
					width: 178rpx;
					font-size: 32rpx;
				}

				.text-ten {
					width: 182rpx;
					color: #f7a723;
				}
			}

			.wraper-row-two {
				width: 680rpx;
				justify-content: space-between;

				.text-eleven {
					width: 244rpx;
					font-size: 24rpx;
					color: #aaaaaa;
				}

				.text-twelve {
					width: 192rpx;
					font-size: 24rpx;
					color: #aaaaaa;
				}
			}
		}
	}
</style>
